<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Rechargeset, RechargesetShow } from "@/http/api";

export default {
  components: { outMain },
  name: "",
  data() {
    return {
      formData: [
        {
          c_sum: "",
          s_sum: "",
        },
      ],
    };
  },
  props: {},
  setup() {},
  methods: {
    addFn() {
      this.formData.push({ c_sum: "", s_sum: "" });
    },
    delFn(index) {
      this.formData.splice(index, 1);
    },
    isInt(value) {
      return Number(value) !== NaN && Number(value) % 1 === 0;
    },
    saveFn() {
      for (let item of this.formData) {
        if (!item.s_sum || !item.c_sum) {
          ElMessage("内容不能为空");
          return false;
        } else if (!this.isInt(item.s_sum) || !this.isInt(item.c_sum)) {
          ElMessage("内容需为纯整数");
          return false;
        }
      }
      Rechargeset({ value: this.formData }).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            type: "success",
            message: "保存成功",
          });
        }
      });
    },
    getData() {
      RechargesetShow().then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
        }
      });
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>鲸币充值</div>
        </div>
        <div class="formMain">
          <div class="stepCont">
            <div class="formDes flexPull">
              <div class="desTitle">
                <div>鲸币充值配置项</div>
                <div>
                  <btnPlain value="新增" @click="addFn"></btnPlain>
                  <btn
                    style="margin-left: 15px"
                    value="保存设置"
                    @click="saveFn"
                  ></btn>
                </div>
              </div>
              <el-form>
                <div class="setPayCont">
                  <div
                    :class="
                      index % 4 == 0 ? 'noLeft setPayItem' : ' setPayItem'
                    "
                    :key="index"
                    v-for="(item, index) in formData"
                  >
                    <div
                      class="delTag iconfont icon-cuowu"
                      @click="delFn(index)"
                    ></div>
                    <el-form-item label-width="80" label="充值鲸币">
                      <el-input
                        v-model="item.c_sum"
                        placeholder="请输入充值鲸币"
                      >
                        <template #append>鲸币</template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label-width="80" label="赠送鲸币">
                      <el-input
                        v-model="item.s_sum"
                        placeholder="请输入充值鲸币"
                      >
                        <template #append>鲸币</template>
                      </el-input>
                    </el-form-item>
                  </div>
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
